/**
 * EmotionReport Component
 * Displays emotion analysis results with visual indicators and suggestions
 * Requirements: 5.1, 5.2, 5.3, 4.2, 4.5, 5.4, 5.5
 */

import React from 'react';
import { EmotionReportProps } from '../types';

/**
 * Emotion icon mapping
 */
const EMOTION_ICONS: Record<string, string> = {
  happy: '😊',
  sad: '😢',
  anxious: '😰',
  calm: '😌',
  angry: '😠',
  excited: '🤩',
  confused: '😕',
  hopeful: '🌟',
};

/**
 * Get icon for emotion name (case-insensitive)
 */
const getEmotionIcon = (emotionName: string): string => {
  const normalized = emotionName.toLowerCase();
  return EMOTION_ICONS[normalized] || '💭';
};

export const EmotionReport: React.FC<EmotionReportProps> = ({
  report,
  generatedImage,
  isLoading,
  onSave,
  onShare,
}) => {
  if (!report && !isLoading) {
    return null;
  }

  return (
    <div
      className="emotion-report-container max-w-2xl mx-auto animate-fadeIn"
      data-testid="emotion-report"
    >
      <div className="bg-white/10 backdrop-blur-lg rounded-xl sm:rounded-2xl shadow-2xl overflow-hidden border border-white/20">
        {/* Emotion Analysis Section */}
        <div className="p-4 sm:p-6 border-b border-white/10">
          <h2 className="text-xl sm:text-2xl font-bold text-white mb-3 sm:mb-4">情绪分析</h2>
          
          {isLoading && !report ? (
            <div className="space-y-3">
              <div className="h-16 bg-white/5 rounded-lg animate-pulse" />
              <div className="h-16 bg-white/5 rounded-lg animate-pulse" />
            </div>
          ) : (
            report && (
              <div className="space-y-2 sm:space-y-3">
                {report.emotions.map((emotion, index) => (
                  <div
                    key={index}
                    className="flex items-center gap-3 sm:gap-4 p-2 sm:p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
                    data-testid={`emotion-item-${index}`}
                  >
                    <span className="text-2xl sm:text-3xl" data-testid={`emotion-icon-${index}`}>
                      {getEmotionIcon(emotion.name)}
                    </span>
                    <div className="flex-1">
                      <div className="flex justify-between items-center mb-1">
                        <span className="text-white font-medium capitalize text-sm sm:text-base">
                          {emotion.name}
                        </span>
                        <span className="text-white/70 text-xs sm:text-sm">
                          {emotion.intensity}%
                        </span>
                      </div>
                      <div className="w-full bg-white/10 rounded-full h-2">
                        <div
                          className="h-2 rounded-full transition-all duration-500"
                          style={{
                            width: `${emotion.intensity}%`,
                            backgroundColor: emotion.color,
                          }}
                          data-testid={`emotion-bar-${index}`}
                        />
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )
          )}
        </div>

        {/* Generated Image Section */}
        <div className="p-4 sm:p-6 border-b border-white/10">
          <h2 className="text-xl sm:text-2xl font-bold text-white mb-3 sm:mb-4">情绪可视化</h2>
          
          {isLoading && !generatedImage ? (
            <div
              className="w-full h-64 bg-white/5 rounded-lg animate-pulse"
              data-testid="image-skeleton"
            />
          ) : generatedImage ? (
            <div className="relative rounded-lg overflow-hidden">
              <img
                src={generatedImage}
                alt="Generated emotion visualization"
                className="w-full h-auto rounded-lg"
                data-testid="generated-image"
              />
            </div>
          ) : null}
        </div>

        {/* Suggestions Section */}
        {report && report.suggestions.length > 0 && (
          <div className="p-4 sm:p-6 border-b border-white/10">
            <h2 className="text-xl sm:text-2xl font-bold text-white mb-3 sm:mb-4">建议</h2>
            <ul className="space-y-2" data-testid="suggestions-list">
              {report.suggestions.map((suggestion, index) => (
                <li
                  key={index}
                  className="flex items-start gap-2 sm:gap-3 text-white/90 text-sm sm:text-base"
                  data-testid={`suggestion-${index}`}
                >
                  <span className="text-purple-400 mt-1">•</span>
                  <span>{suggestion}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

        {/* Summary Section */}
        {report && report.summary && (
          <div className="p-4 sm:p-6 border-b border-white/10">
            <h2 className="text-xl sm:text-2xl font-bold text-white mb-3 sm:mb-4">总结</h2>
            <p className="text-white/90 leading-relaxed text-sm sm:text-base" data-testid="summary">
              {report.summary}
            </p>
          </div>
        )}

        {/* Action Buttons */}
        {report && (onSave || onShare) && (
          <div className="p-4 sm:p-6 flex flex-col sm:flex-row gap-3 sm:gap-4">
            {onSave && (
              <button
                onClick={onSave}
                className="flex-1 px-4 sm:px-6 py-2 sm:py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors text-sm sm:text-base"
                data-testid="save-button"
              >
                💾 保存报告
              </button>
            )}
            {onShare && (
              <button
                onClick={onShare}
                className="flex-1 px-4 sm:px-6 py-2 sm:py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors text-sm sm:text-base"
                data-testid="share-button"
              >
                🔗 分享
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
};
